<template>
  <view class="video">
    <video
      id="myVideo"
      class="video"
      :src="item.url"
      :poster="item.poster"
      @timeupdate="videoUpdate"
      @loadedmetadata="loadedmetadata"
      @play="onPlay"
      @pause="onPause"
      :controls="false"
      @click="handelVideo"
    ></video>
    <view class="tabbar">
      <slider
        class="slider"
        step="1"
        backgroundColor="#9f9587"
        activeColor="#d6d2cc"
        block-color="#FFFFFF"
        block-size="12"
        min="0"
        :max="videoTime"
        :value="sliderValue"
        @change="sliderChange"
        @changing="sliderChanging"
      />
      <view class="flex items-center justify-between px-12 pt-4">
        <view class="flex items-center">
          <u-avatar size="40"></u-avatar>
          <view class="color-white px-8 text-12 ellipsis-1">名字啊啊啊啊</view>
          <view>
            <u-button
              size="mini"
              type="primary"
              text="+关注"
              shape="circle"
            ></u-button>
          </view>
        </view>
        <view class="flex flex-1 justify-around">
          <u-icon
            name="download"
            color="#fff"
            size="32rpx"
            label-pos="bottom"
            label-size="24rpx"
            label-color="#fff"
            label="1"
            :stop="true"
          ></u-icon>
          <u-icon
            name="star-fill"
            size="32rpx"
            color="#fff"
            label-pos="bottom"
            label-color="#fff"
            label="1"
            label-size="24rpx"
          ></u-icon>
          <u-icon
            name="thumb-up-fill"
            size="32rpx"
            color="#fff"
            label-pos="bottom"
            label-color="#fff"
            label="1"
            label-size="24rpx"
          ></u-icon>
          <u-icon
            name="chat"
            size="32rpx"
            color="#fff"
            label-color="#fff"
            label-pos="bottom"
            label="2"
            label-size="24rpx"
            @click="comment"
          ></u-icon>
        </view>
      </view>
    </view>
    <view class="videoPlayer" v-if="!isPlayer">
      <u-icon
        name="play-right-fill"
        color="#fff"
        size="64rpx"
        @click="handelVideo"
      ></u-icon>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    current: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      video: null,
      videoTime: 0,
      sliderValue: 0,
      druationTime: 0,
      currtime: 0,
      isPlayer: true,
    };
  },
  methods: {
    loadedmetadata(event) {
      this.videoTime = event.detail.duration; //视频总时间
    },
    play() {
      this.video.play();
    },
    pause() {
      this.video.pause();
    },
    onPause() {
      this.isPlayer = false;
    },
    onPlay() {
      this.isPlayer = true;
    },
    handelVideo() {
      if (this.isPlayer) {
        this.video.pause();
      } else {
        this.video.play();
      }
    },
    //播放进度变化 时触发 （触发频率 250ms 一次）
    videoUpdate(event) {
      //进度条 绑定视频播放进度
      let duration = this.videoTime;
      let sliderValue = (event.detail.currentTime / duration) * 100;
      let second = (sliderValue / 100) * duration;
      this.sliderValue = second;
      //视频总时长
      this.druationTime = duration;
      //视频当前播放时长
      this.currtime = second;
    },
    //在拖拽 时触发
    sliderChanging(event) {
      console.log("监听：拖拽中--->", event.detail.value);
    },
    //拖拽完成 时触发
    sliderChange(event) {
      console.log("监听：拖拽完成--->", event.detail.value);
      (this.sliderValue = event.detail.value),
        //跳到视频指定位置
        this.video.seek(event.detail.value);
      this.play();
    },
    comment() {
      this.$emit("comment");
    },
  },
  mounted() {
    this.video = uni.createVideoContext("myVideo", this);
    // 在页面中创建一个 IntersectionObserver 实例
    const observer = uni.createIntersectionObserver(this);
    // 监听视频节点是否进入或离开视口的回调函数

    observer.relativeToViewport().observe(".video", (res) => {
      if (res.intersectionRatio > 0) {
        this.play();
      } else {
        // 视频离开视口，暂停视频

        this.pause();
      }
    });
  },
};
</script>

<style lang="scss" scoped>
.video {
  height: 100vh;
  width: 100vw;
}
.slider {
  height: 2px;
  width: 702rpx;
}
.tabbar {
  position: absolute;
  bottom: 34px;
  left: 0;
}
.videoPlayer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
